<template>
  <div class="app-container">
    <el-form ref="objectForm" :model="object" :rules="objectRules" label-width="150px">
      <title-container describe="活动" />
      <el-row class="gpo-form mt-20">
        <el-form-item label="活动主题：" prop="activityTheme">
          <el-input v-model="object.activityTheme"/>
        </el-form-item>
        <el-form-item label="活动时间：" prop="informationType">
          <el-date-picker
            v-model="object.activeTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item label="地点：" prop="activePlace">
          <el-input v-model="object.activePlace"/>
        </el-form-item>
        <el-form-item label="活动简介：" prop="activityIntroduction">
          <el-input v-model="object.activityIntroduction" :rows="4" type="textarea" placeholder="请输入活动简介"/>
        </el-form-item>
        <el-form-item label="活动规则：" prop="activityRules">
          <el-input v-model="object.activityRules" :rows="4" type="textarea" placeholder="请输入活动规则"/>
        </el-form-item>
        <el-form-item label="缩略图：" prop="thumb">
          <single-image
            :images="fileList"
            :time="false"
            :length="1"
            @success="setImage"/>
        </el-form-item>
        <!--<el-form-item label="内容编辑：" prop="articleContent">-->
        <!--<div class="editor-container">-->
        <!--<Tinymce ref="editor" :height="200" v-model="object.articleContent" />-->
        <!--</div>-->
        <!--</el-form-item>-->
      </el-row>
      <!--户型信息-->
      <el-row :gutter="24">
        <el-row>
          <el-col :span="12">
            <div style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px" class="font16 color-333">参与项目</div>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button icon="el-icon-circle-plus-outline" class="border-4C7FD7 color-4C7FD7" style="padding: 5px 10px;" @click="showDialog1">新增</el-button>
          </el-col>
        </el-row>
        <el-row class="mt-15">
          <el-table :data="object.projectList" :header-cell-style="{background:'#F1F3F5',color:'#666666'}" border fit highlight-current-row style="width: 100%">
            <el-table-column align="center" label="楼盘名称">
              <template slot-scope="scope">
                <span>{{ scope.row.object.buildingName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="均价">
              <template slot-scope="scope">
                <span>{{ scope.row.object.sellingPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="地址">
              <template slot-scope="scope">
                <span>{{ scope.row.object.address }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="65">
              <template slot-scope="scope">
                <el-button type="text" @click="deleteIndex(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-form>
    <div class="gpo-btn text-center mt-20" >
      <el-button type="primary" class="gpo-btn_small" @click="onBack">返回</el-button>
      <el-button type="primary" class="gpo-btn_small" @click="onSubmit('新增活动')">提交</el-button>
    </div>
    <!-- 展示所有项目 -->
    <!-- 新增修改 -->
    <el-dialog :visible.sync="dialogFormVisible1" title="新增分类" width="650px">
      <el-row>
        <el-form label-width="90px">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-form-item label="楼盘名称：" >
                <el-input v-model="listQuery.buildingName" placeholder="姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="text-center">
              <el-button type="" class="border-4C7FD7 color-4C7FD7" icon="el-icon-search" @click="searchList">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column label="楼盘名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.buildingName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="均价" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.sellingPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物业公司" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.propertyCompany }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div slot="footer" class="dialog-footer text-center">
        <el-button :loading="btnLoading" type="primary" @click="confirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TitleContainer from '@/components/GpoCommon/TitleContainer'
import Tinymce from '@/components/Tinymce'
import SingleImage from '@/components/Upload/singleImage'
import mixin from './rules/activity.js'
export default {
  name: 'CreateNews',
  components: { TitleContainer, Tinymce, SingleImage },
  mixins: [mixin],
  data() {
    return {
      message: '新增活动',
      fileList: [],
      buildingTypes: [], // 楼盘
      dialogFormVisible1: false,
      listQuery: {
        level: 'building',
        buildingName: '',
        pageNum: 1,
        pageSize: 10
      },
      object: {
        'activityTheme': '',
        'activeTime': '',
        'activePlace': '',
        'applicantsNumber': 1,
        'status': 0,
        'activityPicture': '',
        'iconList': [],
        'activityIntroduction': '',
        'activityRules': '',
        'projectList': [],
        'thumbnail': '', // 缩略图
        'level2': '',
        'level1': '',
        'level': 'activitiesManagement'
      }
    }
  },
  created() {
    if (this.$route.params.id) {
      // this.message = '修改活动'
      // const _this = this
      // searchList({ id: this.$route.params.id }).then((res) => {
      //     this.news = res.data.list ? res.data.list[0] : {}
      // })
    }
    // 初始化楼盘
    let query1 = {
      level: 'building',
      pageSize: 10,
      pageNum: 1
    }
    query1 = this.setListQuery(query1)
    this.searchListAll(query1).then((res) => {
      this.buildingTypes = res.data.list
    })
  },
  methods: {
    // showDialog
    showDialog1() {
      this.dialogFormVisible1 = true
      this.searchList()
    },
    onSubmit(message) {
      const object = this._.cloneDeep(this.object)
      object.activeTime = object.activeTime.join('~')
      const objectData = {
        object: object,
        plateType: 'gnmpp_fangyuns'
      }
      this.saveNewMedia(objectData, message)
    },
    confirm() {
      const _this = this
      this._.forEach(_this.multipleSelection, function(selected, index) {
        // _this.object.projectList.push({
        //     'serialNumber': index+1,
        //     'buildingName': selected.object.buildingName,
        //     'averagePrice': selected.object.sellingPrice,
        //     'address': selected.object.address,
        //     'pictureUrl': selected.object.pictureList
        // })
        _this.object.projectList.push(selected)
      })
      this.dialogFormVisible1 = false
    },
    deleteIndex(index) {
      this.object.projectList.splice(index, 1)
    },
    // 上传多图
    setImage(file) {
      this.object.thumbnail = file[0].imgUrl
    }
  }
}
</script>
